<template>
	<view class="assess">
		<!-- header -->
		<!-- <s-pull-scroll ref="pullScroll" :back-top="true" :pullUp="loadData"> -->
		<view class="as-nav">
			<view @click="onNav(0)" :class="['item', {'item-active': navFlag == 0 }]">
				最新留言({{ newAssess.count }})
			</view>
			<view @click="onNav(1)" :class="['item', {'item-active': navFlag == 1 }]">
				已回复({{ replied.count }})
			</view>
		</view>

		<!-- 第一块轮播  最新留言 -->
		<view class="content-box" v-show="navFlag == 0">
			<block v-for="(item,index) in newAssess.response" :key="index">
				<view class="top">
					<image :src="item.proimgs" :lazy-load="true" mode="aspectFill" @click="navToId(val.pro_id)"></image>
					<view class="top-box1">
						{{item.pro_name}}
					</view>
					<view class="top-box2">
						￥{{item.nowprice}}
					</view>
				</view>

				<!-- 最新评价 -->
				<view class="bottom" v-for="(val,indexs) in item.message" :key="indexs">
					<view class="bottom-top">
						<view class="top1">
							<view class="item1">
								<image :src="val.shavatar" :lazy-load="true" mode="aspectFill"></image>
								<text>{{val.nickname}}</text>
							</view>
							<view class="item2">
								<view class="a reply" @click="onReply(val)">
									<text class="iconfont">&#xe7f3;</text>
									<text>回复</text>
								</view>
								<!-- <view :class="['a','like',{'a-active': true}] ">
									<text class="iconfont">&#xe65d;</text>
									<text>点赞</text>
								</view> -->
							</view>
						</view>
						<!-- 回复输入框 -->
						<view class="replied" v-if="val.replyFlag">
							<input type="text" v-model="inputText" :focus="val.replyFlag" :placeholder="`回复@${val.nickname}`" />
							<button type="primary" @click="onSend(val)">发送</button>
						</view>

						<view class="top2">
							<view class="text">
								{{val.coments}}
							</view>

						</view>
					</view>
				</view>
			</block>
		</view>

		<!-- 已回复留言 -->
		<view class="content-box" v-show="navFlag == 1">
			<block v-for="(item,index) in replied.response" :key="index">
				<view class="top">
					<image :src="item.proimgs" :lazy-load="true" mode="aspectFill" @click="navToId(item.pro_id)"></image>
					<view class="top-box1">
						{{item.pro_name}}
					</view>
					<view class="top-box2">
						￥{{item.nowprice}}
					</view>
				</view>

				<!-- 最新评价 -->
				<view class="bottom" v-for="(val,indexs) in item.message" :key="indexs">

					<view class="bottom-top">
						<view class="top1">
							<view class="item1">
								<image :src="val.shavatar" :lazy-load="true" mode="aspectFill"></image>
								<text>{{val.nickname}}</text>
							</view>
							<view class="item2">
								<view class="a reply" @click="onReply(val)">
									<text class="iconfont">&#xe7f3;</text>
									<text>回复</text>
								</view>
								<!-- <view :class="['a','like',{'a-active': true}] " v-if="false">
									<text class="iconfont">&#xe65d;</text>
									<text>点赞</text>
								</view> -->
							</view>
						</view>
						<!-- 回复输入框 -->
						<view class="replied" v-if="val.replyFlag">
							<input type="text" v-model="inputText" :focus="val.replyFlag" :placeholder="`回复@${val.nickname}`" />
							<button type="primary" @click="onSend(val)">发送</button>
						</view>
						<view class="top2">
							<view class="text">
								{{val.coments}}
							</view>
						</view>

						<!-- 评论的回复 -->
						<view class="as-reply" v-for="(reply,subs) in val.message" :key="subs">
							<view class="who">
								<image :src="reply.shavatar" mode="aspectFill"></image>
								<text>{{reply.shname}}</text>
								<view>
									店家
								</view>
							</view>

							<view class="content">
								{{reply.coments}}
							</view>

						</view>
					</view>
				</view>
			</block>

		</view>
		<!-- 已回复留言end -->



	</view>
</template>

<script>
	import sPullScroll from '@/components/s-pull-scroll/index.vue';
	var page = 1;
	export default {
		components: {
			sPullScroll
		},
		data() {
			return {
				navFlag: 0, // 控制导航栏切换导航栏
				replyFlag: false, // 回复框的显示与隐藏
				newAssess: {}, // 最新评价
				replied: {}, // 已回复的数据
				inputText: '', // 输入框的内容	
			}
		},
		onLoad() {
			this.queryAssess(page);
		},
		onPullDownRefresh() {
			// page = 1;
			this.queryAssess(page);
		},
		methods: {
			async queryAssess(page) {

				uni.showLoading({
					title: '信息加载中···'
				})
				let a = await this.$http.queryLL();
				this.newAssess = a.data.MessageList;
				this.replied = a.data.Recovered;
				uni.hideLoading();
				uni.stopPullDownRefresh();
			},

			onReply(val) { // 点击回复
				this.$set(val, 'replyFlag', true);
			},
			async onSend(val) { // 发送消息
				let aa = {
					messid: val.messid,
					productid: val.productid,
					coments: this.inputText
				}
				let a = await this.$http.answerLL(aa);
				if (a.code == 200) {
					uni.showToast({
						title: a.message,
						icon: 'none'
					})
					this.inputText = '', // 清空输入框
						setTimeout(() => {
							this.queryAssess();
							uni.hideToast();
							uni.hideLoading();
						}, 500)

					return
				}
				uni.showToast({
					title: a.message,
					icon: 'none'
				})
				val.replyFlag = false;

			},

			onNav(id) { // 点击切换
				this.navFlag = id
			},
			navToId(id) {
				uni.navigateTo({
					url: `/pages/detail/detail?proid=${id}`
				})
			},
			changeSwiper(e) { // 滑动轮播的
				this.swiperCurrent = e.target.current
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'static/css/myStore.scss';

	/* #ifdef MP-WEIXIN */
	.ud-swiper {
		height: 1140upx;

	}

	/* #endif */
</style>
